import { Classes } from '../styles'
// dom hepler
export class TableDOMHelper {
  readonly tableWrapper: HTMLDivElement
  readonly table: HTMLDivElement
  readonly tableHeader: HTMLDivElement
  readonly tableBody: HTMLDivElement

  readonly stickyScroll: HTMLDivElement
  readonly stickyScrollItem: HTMLDivElement

  constructor(tableWrapper: HTMLDivElement) {
    this.tableWrapper = tableWrapper
    this.table = tableWrapper.querySelector<HTMLDivElement>(`.${Classes.table}`)
    this.tableHeader = this.table.querySelector(`:scope > .${Classes.tableHeader}`)
    this.tableBody = this.table.querySelector(`:scope > .${Classes.tableBody}`)

    const stickyScrollSelector = `.${Classes.table} + .${Classes.stickyScroll}`
    this.stickyScroll = tableWrapper.querySelector<HTMLDivElement>(stickyScrollSelector)
    this.stickyScrollItem = this.stickyScroll.querySelector(`.${Classes.stickyScrollItem}`)
  }

  getVirtualTop(): HTMLDivElement {
    return this.tableBody.querySelector<HTMLDivElement>(`.${Classes.virtualBlank}.top`)
  }

  getTableRows(): NodeListOf<HTMLTableRowElement> {
    const htmlTable = this.getTableBodyHtmlTable()
    return htmlTable.querySelectorAll<HTMLTableRowElement>(`:scope > tbody > .${Classes.tableRow}`)
  }

  getTableBodyHtmlTable(): HTMLTableElement {
    return this.table.querySelector(`.${Classes.tableBody} table`)
  }
}
